<template>
  <el-container>
    <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
      <el-menu router>
        <template v-for="(item, index) in routes">
          <el-submenu v-if="item.children && item.children.length" :key="index" :index="`/${item.path}`">
            <template slot="title">{{item.name}}</template>
            <el-menu-item v-for="(child, i) in item.children" :key="`${index}-${i}`" :index="`/${item.path}/${child.path}`">{{child.name}}</el-menu-item>
          </el-submenu>
          <el-menu-item v-else :key="index" :index="`/${item.path}`">{{item.name}}</el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
       <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import routes from '@/router/routes';
export default {
  data () {
    return {
      routes
    }
  }
}
</script>
<style>
.el-container{
  width: 100%;
  height: 100vh;
}
</style>
